<template>
  <s-layout :title="`${state.id ? '编辑' : '添加'}就诊人`" :bgStyle="{ color: '#FFF' }">
    <view>
      <view class="tips">注意： 请填写准确的姓名和身份证号，将用于进行实名认证</view>
      <uni-forms
        ref="addressFormRef"
        v-model="state.model"
        :rules="state.rules"
        validateTrigger="bind"
        labelWidth="160"
        labelAlign="left"
        border
        :labelStyle="{ fontWeight: 'bold' }"
      >
        <view class="bg-white form-box ss-p-x-30">
          <uni-forms-item name="real_name" label="真实姓名" class="form-item">
            <uni-easyinput
              v-model="state.model.real_name"
              placeholder="请输入真实姓名"
              :inputBorder="false"
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            />
          </uni-forms-item>

          <uni-forms-item name="id_card" label="身份证号" class="form-item">
            <uni-easyinput
              v-model="state.model.id_card"
              type="idcard"
              placeholder="请输入身份证号"
              :inputBorder="false"
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            >
            </uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="mobile" label="手机号" class="form-item">
            <uni-easyinput
              v-model="state.model.phone"
              type="number"
              placeholder="请输入手机号"
              :inputBorder="false"
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            >
            </uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="性别" name="sex" class="form-item" @tap="handleSex">
            <view style="width: 100%">
              <uni-easyinput
                v-model="state.model.sex"
                disabled
                :inputBorder="false"
                :styles="{ disableColor: '#fff', color: '#333' }"
                placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
                placeholder="请选择性别"
              >
                <template v-slot:right>
                  <uni-icons type="right"></uni-icons>
                </template>
              </uni-easyinput>
            </view>
          </uni-forms-item>
          <uni-forms-item name="age" label="年龄" class="form-item">
            <uni-easyinput
              v-model="state.model.age"
              type="number"
              placeholder="请输入年龄"
              :inputBorder="false"
              placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            >
            </uni-easyinput>
          </uni-forms-item>
        </view>
      </uni-forms>
    </view>
    <view class="goadd" @tap="onSave"> 确认保存 </view>

    <su-popup :show="state.showRegion" round="10" @close="state.showRegion = false">
      <view class="ss-modal-box bg-white ss-flex-col">
        <view class="box">
          <view @tap="bindChange(item)" v-for="item in state.sexList" :key="item.value">{{
            item.name
          }}</view>
        </view>
        <view class="line"></view>
        <view class="cancle" @tap="state.showRegion = false">取消</view>
      </view>
    </su-popup>
  </s-layout>
</template>

<script setup>
  import test from '@/sheep/helper/test.js';
  import sheep from '@/sheep';
  import { ref, reactive, onBeforeMount, unref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { consignee, mobile, address, region } from '@/sheep/validate/form';
  const state = reactive({
    id: '',
    sex: '1',
    showRegion: false,
    value: [],
    model: {
      real_name: '',
      phone: '',
      id_card: '',
      age: '',
      sex: '',
    },
    sexList: [
      { name: '男', value: 1 },
      { name: '女', value: 2 },
    ],
    rules: {
      real_name: {
        rules: [
          {
            required: true,
            errorMessage: '请输入真实姓名',
          },
        ],
      },
      id_card: {
        rules: [
          {
            required: true,
            errorMessage: '请输入身份证号',
          },
          {
            validateFunction: function (rule, value, data, callback) {
              if (!test.idCard(value)) {
                callback('请输入正确的身份证号');
              }
              return true;
            },
          },
        ],
      },
      age: {
        rules: [
          {
            required: true,
            errorMessage: '请输入年龄',
          },
        ],
      },
      sex: {
        rules: [
          {
            required: true,
            errorMessage: '请选择性别',
          },
        ],
      },
      mobile,
      address,
      region,
    },
  });
  const addressFormRef = ref(null);
  const onSave = async () => {
    const validate = await unref(addressFormRef)
      .validate()
      .then(() => {
        uni.showLoading({
          mask: true,
          title: '保存中',
        });
        if (state.id) {
          sheep.$api.second
            .editPatient_api({
              ...state.model,
              sex: state.sex,
            })
            .then((res) => {
              console.log(res);
              if (res?.code) {
                uni.showToast({
                  title: '编辑成功',
                  icon: 'none',
                  mask: true,
                });
                setTimeout(() => {
                  sheep.$router.back();
                }, 500);
              }
            })
            .finally(() => {
              uni.hideLoading();
            });
        } else {
          sheep.$api.second
            .addPatient_api({
              ...state.model,
              sex: state.sex,
            })
            .then((res) => {
              console.log(res);
              if (res?.code) {
                uni.showToast({
                  title: '添加成功',
                  icon: 'none',
                  mask: true,
                });
                setTimeout(() => {
                  sheep.$router.back();
                }, 500);
              }
            })
            .finally(() => {
              uni.hideLoading();
            });
        }
      })
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;
  };
  const bindChange = (e) => {
    state.model.sex = e.name;
    state.sex = e.value;
    state.showRegion = false;
  };

  const handleSex = () => {
    state.showRegion = true;
  };

  onLoad((options) => {
    if (Object.keys(options).length) {
      state.id = options.id;
      state.model = options;
      state.sex = options.sex;
      state.model.sex = ['男', '女'][options.sex - 1];
    }
  });
</script>

<style lang="scss" scoped>
  .tips {
    padding: 52rpx 36rpx 60rpx;
    font-size: 32rpx;
    color: #767676;
    line-height: 38rpx;
  }

  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 32rpx !important;
      color: #000000 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 32rpx !important;
      color: #7e7e7e !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 32rpx !important;
      color: #7e7e7e !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }

  .default-box {
    width: 100%;
    box-sizing: border-box;
    height: 100rpx;

    .default-box-title {
      font-size: 28rpx;
      color: #333333;
      line-height: normal;
    }
  }

  .footer-box {
    .save-btn {
      width: 710rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }

    .cancel-btn {
      width: 710rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: var(--ui-BG);
    }
  }

  .goadd {
    position: fixed;
    bottom: 180rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 308rpx;
    height: 68rpx;
    line-height: 68rpx;
    text-align: center;
    background: linear-gradient(90deg, #ebac60 5%, #f3ca96 100%);
    box-shadow: 0rpx 6rpx 9rpx 0rpx rgba(246, 197, 138, 0.56);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 36rpx;
    color: #ffffff;
  }

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    > view {
      width: 100%;
      text-align: center;
      height: 100rpx;
      line-height: 100rpx;
      &:first-child {
        border-bottom: 2rpx solid #dcdcdc;
      }
    }
  }
  .line {
    height: 16rpx;
    background: #eaeaec;
    width: 100%;
  }
  .cancle {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }
</style>
